<template>
  <div class="app-container">
    <h1>Vue3 Element Plus 示例应用</h1>
    
    <!-- 使用Element Plus的按钮组件 -->
    <el-button type="primary" @click="handleButtonClick">主要按钮</el-button>
    <el-button>默认按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
    
    <!-- 使用Element Plus的表格组件 -->
    <el-card class="table-card" v-if="showTable">
      <template #header>
        <div class="card-header">
          <span>用户信息表</span>
        </div>
      </template>
      <el-table :data="userList" stripe style="width: 100%">
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      showTable: false,
      userList: [
        { id: 1, name: '张三', age: 28, address: '北京市朝阳区' },
        { id: 2, name: '李四', age: 32, address: '上海市浦东新区' },
        { id: 3, name: '王五', age: 25, address: '广州市天河区' },
        { id: 4, name: '赵六', age: 35, address: '深圳市南山区' }
      ]
    }
  },
  methods: {
    handleButtonClick() {
      this.showTable = !this.showTable
    }
  }
}
</script>

<style>
.app-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.el-button {
  margin-right: 10px;
  margin-bottom: 20px;
}

.table-card {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>